<template>
  <view class="card-page">
    <view class="package-title">
      {{ pkg.pkgName }}
    </view>
    <view class="detail-list">
      <view class="item" v-for="(item,index) in pkg.itemList" :key="index">
        <view>{{item.itemName}}</view>
        <view class="money">¥{{item.itemAmt}}</view>
      </view>
    </view>
    <view class="pay">
      <view class="">
        <text class="money">
          ¥{{ pkg.money | fixed }}
        </text>
        <text v-if="pkg.money !== pkg.receivableMoney" class="cross">
          ¥{{ pkg.receivableMoney | fixed }}
        </text>
      </view>
      <view class="btn" @click="toOption">
        下一步
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pkg: []
      }
    },
    onLoad(opt) {
      this.pkg = JSON.parse(opt.pkg)
    },
    methods: {
      toOption() {
        uni.navigateTo({
          url: '../PackageOption/PackageOption?pkg=' + JSON.stringify(this.pkg),
        })
      }
    }
  }
</script>

<style scoped lang="less">
.card-page {
  display: flex;
  flex-direction: column;
}
.package-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36upx;
  color: #FFFFFF;
  line-height: 44upx;
  margin-bottom: 32upx;
}
.detail-list {
  flex: 1;
  padding: 0 32upx 96upx;
  background-color: #FFF;
  border-radius: 8px;
  overflow: auto;
  .item {
    display: flex;
    justify-content: space-between;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.5);
    line-height: 44upx;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 24upx 0;
  }
}
.pay {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 108upx;
  padding: 0 32upx;
  box-shadow: 0px -8px 76px 22px rgba(227,237,255,0.58);
  background-color: #FFF;
  .cross {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: #DADADA;
    line-height: 48upx;
    text-decoration: line-through;
    margin-left: 10upx;
  }
  .btn {
    width: 240upx;
    height: 64upx;
    background: #366AA4;
    border-radius: 64upx;
    text-align: center;
    line-height: 64upx;
    color: #FFF;
  }
}
.money {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 32upx;
  color: #FFAA32;
  line-height: 44upx;
}
</style>
